<template>
	<view class="search-container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="back-btn" @click="goBack">
				<u-icon name="arrow-left" size="32"></u-icon>
			</view>
			<!-- 搜索框 -->
			<u-search 
				v-model="keyword" 
				@search="doSearch" 
				placeholder="请输入关键词搜索帖子" 
				:showAction="true"
				actionText="搜索"
				@custom="doSearch"
				@clear="clearResults"
			></u-search>
		</view>

		<!-- 搜索历史 -->
		<view v-if="historyList.length > 0" class="search-history">
			<view class="title">搜索历史</view>
			<view class="history-tags">
				<text 
					class="tag" 
					v-for="(item, index) in historyList" 
					:key="index" 
					@click="useHistory(item)"
				>{{ item }}</text>
			</view>
		</view>

		<!-- 搜索结果 -->
		<scroll-view class="result-list" scroll-y @scrolltolower="loadMore">
			<block v-if="results.length > 0">
				<view 
					class="result-item" 
					v-for="(item, index) in results" 
					:key="index"
					@click="goToDetail(item)"
				>
					<text class="title">{{ item.title }}</text>
					<text class="desc">{{ item.description }}</text>
				</view>
				<u-loadmore :status="loadStatus" />
			</block>
			<block v-else>
				<view class="no-result">
					<u-empty text="暂无搜索结果" icon="/static/img/empty_search.png"></u-empty>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 搜索关键字
			keyword: '',
			// 搜索结果
			results: [],
			// 分页参数
			page: 1,
			limit: 5,
			loadStatus: 'loadmore', // loadmore / loading / nomore
			// 搜索历史
			historyList: []
		};
	},
	onLoad(options) {
		// 接收来自其他页面的 keyword 参数
		if (options.keyword) {
			this.keyword = options.keyword;
			this.doSearch();
		}
	},
	methods: {
		// 返回首页
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},

		// 执行搜索
		doSearch() {
			if (!this.keyword.trim()) {
				uni.showToast({ title: "请输入关键词", icon: "none" });
				return;
			}

			// 添加到搜索历史
			if (!this.historyList.includes(this.keyword)) {
				this.historyList.unshift(this.keyword);
				if (this.historyList.length > 5) this.historyList.pop(); // 最多保留5条
			}

			// 模拟请求接口
			setTimeout(() => {
				const mockData = [
					{ id: 1, title: `影视 - ${this.keyword}`, description: '这是与影视相关的帖子描述...' },
					{ id: 2, title: `摄影 - ${this.keyword}`, description: '这是与摄影相关的帖子描述...' },
					{ id: 3, title: `旅行 - ${this.keyword}`, description: '这是与旅行相关的帖子描述...' },
					{ id: 4, title: `娱乐 - ${this.keyword}`, description: '这是与娱乐相关的帖子描述...' },
					{ id: 5, title: `游戏 - ${this.keyword}`, description: '这是与游戏相关的帖子描述...' }
				];

				// 第一次加载或刷新
				if (this.page === 1) {
					this.results = mockData;
				} else {
					this.results = [...this.results, ...mockData];
				}

				// 模拟没有更多数据了
				if (this.page >= 2) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			}, 600);
		},

		// 使用历史记录
		useHistory(keyword) {
			this.keyword = keyword;
			this.page = 1;
			this.doSearch();
		},

		// 清空搜索结果
		clearResults() {
			this.results = [];
		},

		// 加载更多
		loadMore() {
			if (this.loadStatus !== 'loadmore') return;
			this.page++;
			this.loadStatus = 'loading';
			this.doSearch();
		},

		// 跳转详情页（假设你有详情页面）
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages/home/news-topic-detail?id=${item.id}&title=${item.title}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.search-container {
	padding: 0;
	background-color: #f5f5f5;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.custom-nav {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

	.back-btn {
		margin-right: 20rpx;
	}
}

.search-history {
	background-color: #fff;
	padding: 30rpx;
	margin: 20rpx;

	.title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.history-tags {
		display: flex;
		flex-wrap: wrap;

		.tag {
			background-color: #f0f0f0;
			color: #333;
			padding: 10rpx 20rpx;
			border-radius: 40rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			font-size: 26rpx;
		}
	}
}

.result-list {
	flex: 1;
	overflow-y: auto;
	padding: 0 20rpx;
}

.result-item {
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #eee;
	border-radius: 10rpx;
	margin-bottom: 20rpx;

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
	}

	.desc {
		font-size: 26rpx;
		color: #999;
		margin-top: 10rpx;
		display: block;
	}
}

.no-result {
	margin-top: 100rpx;
	text-align: center;
}
</style>